(function (window) {


    var stats = initStats();

    // create a scene, that will hold all our elements such as objects, cameras and lights.
    var scene = new THREE.Scene();

    // create a camera, which defines where we're looking at.
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

    // create a render and set the size
    var webGLRenderer = new THREE.WebGLRenderer({alpha: true});
    webGLRenderer.setClearColor(0x000000, 0);
    webGLRenderer.setSize(window.innerWidth, window.innerHeight);

    // position and point the camera to the center of the scene
    camera.position.x = 20;
    camera.position.y = 0;
    camera.position.z = 150;

    // add the output of the renderer to the html element
    document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
    //修复浏览器滚动条问题
    document.getElementById("WebGL-output").style.height = window.innerHeight + 'px';


    var cloud;

    createParticles(4, 6000, true, 0.8, true, true, '#4693f0');
    render();

    function createParticles(size, number, transparent, opacity, vertexColors, sizeAttenuation, vcolor) {


        var geom = new THREE.Geometry();
        var material = new THREE.PointCloudMaterial({
            size: size,
            transparent: transparent,
            opacity: opacity,
            vertexColors: vertexColors,

            sizeAttenuation: sizeAttenuation,
            color: vcolor
        });


        var range = 500;
        for (var i = 0; i < number; i++) {
            var particle = new THREE.Vector3(Math.random() * range - range / 2, Math.random() * range - range / 2, Math.random() * range - range / 2);
            geom.vertices.push(particle);
            var color = new THREE.Color(vcolor);
            color.setHSL(color.getHSL().h, color.getHSL().s, Math.random() * color.getHSL().l);
            geom.colors.push(color);

        }

        cloud = new THREE.PointCloud(geom, material);
        cloud.name = "particles";
        scene.add(cloud);
    }


    var step = 0;

    function render() {

        stats.update();

            step += 0.01;

            cloud.rotation.x = step;
            cloud.rotation.z = step;


        webGLRenderer.render(scene, camera);
        requestAnimationFrame(render);

    }

    function initStats() {

        var stats = new Stats();
        stats.setMode(0); // 0: fps, 1: ms

        // Align top-left
        stats.domElement.style.position = 'fixed';
        stats.domElement.style.left = '0px';
        stats.domElement.style.bottom = '0px';

        document.getElementById("Stats-output").appendChild(stats.domElement);

        return stats;
    }
})(window);
